<template>
	<view class="container">
		<!-- Back button with improved touch area -->
		<view class="nav-bar">
			<view class="back-btn-container" @tap="goBack">
				<text class="back-btn">←</text>
			</view>
			<text class="page-title">商品详情</text>
		</view>

		<!-- Product details -->
		<scroll-view class="product-details" scroll-y>
			<!-- Product header info -->
			<view class="product-header">
				<swiper class="product-swiper" indicator-dots autoplay circular>
					<swiper-item v-for="(url, index) in productDetail.imageList.slice(0, 5)" :key="index">
						<image class="product-cover" :src="url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="product-info">
					<view class="product-title">{{ productDetail.productName }}</view>
					<view class="product-price">
						<text class="price">¥{{ productDetail.productPrice }}</text>
						<!-- <text class="commission-rate">佣金: {{ productDetail.productBack }}</text> -->
						<text class="commission-rate">佣金: {{ formatPercentage(productDetail.productProfit) }} %</text>
					</view>
					<view class="product-stats">
						<!-- <text class="sales">销量: {{ productDetail.productSales }}</text> -->
						<!-- <text class="review">浏览量: {{ productDetail.productReview }}</text> -->
						<view class="viw-viw">
							<view v-if="productDetail.imgList[0].imagePath6 && isAfterTargetDate" class="share-btn-group">
								<button class="share-btn" @tap="previewShareImage(productDetail.imgList[0])"> 抖音选品 </button>
								<!-- 新增：VIP用户下载次数显示 -->
								<button class="share-btn" @tap="goToAIGenerate"> AI文案生成 </button>
							</view>
							<view v-else class="no-link-tip"></view>
						</view>
						<!-- <view class="vip-tag" v-if="productDetail.productType === 'vip'">VIP专享</view> -->
					</view>

					<!-- 新增：VIP用户下载次数显示 -->
					<!-- <view v-if="isVip" class="download-info">
            <text class="download-count">已下载次数: {{ downloadInfo.userCount || 0 }}</text>
            <text class="download-remaining">今日可下载次数: {{ downloadInfo.downloadCount || 0 }}</text>
          </view> -->
				</view>
			</view>

			<!-- Product tabs -->
			<scroll-view class="product-tabs-container" scroll-x>
				<view class="product-tabs">
					<view v-for="(tab, index) in videoTabs" :key="index" :class="['tab-item', activeTab === tab ? 'active' : '']"
						@tap="switchTab(tab)">
						{{ tab }}
					</view>
				</view>
			</scroll-view>
			<view class="tab-content">
				<view v-for="(tab, index) in (videoTabs || [])" :key="index" v-show="activeTab === tab" class="videos-content">
					<view class="videos-container" v-if="currentTabVideos && currentTabVideos.length > 0">
						<view class="video-grid">
							<view class="video-card" v-for="(video, index) in currentTabVideos" :key="video.id">
								<view class="video-thumbnail">
									<!-- 将 video 标签替换为 image 标签，并转换链接格式 -->
									<image class="video-preview"
										:src="video.videoPath.replace('.mp4', '.jpg').replace('sucai/', 'video_cover/')"
										mode="aspectFill" />
									<checkbox class="video-checkbox" :checked="selectedVideos.includes(video.id)"
										@tap="toggleVideoSelection(video.id)" />
								</view>
							</view>
						</view>
						<view class="batch-action-bar">
							<view class="selection-info">
								<text>已选择 {{ selectedVideos.length }} 个视频</text>
							</view>
							<view class="viw-viw">
								<div class="batch-btn-group">
									<button class="batch-download-btn" @tap="toggleSelectAll">
										{{ isAllSelected ? '取消全选' : '全选' }}
									</button>
									<button class="batch-download-btn" @tap="downloadSelectedVideos">
										批量下载
									</button>
								</div>
							</view>
						</view>
					</view>

					<view v-else class="empty-tip">
						暂无{{ tab }}视频
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- VIP Modal -->
		<view class="modal" v-if="showVipModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">VIP专享内容</text>
					<text class="modal-close" @tap="closeVipModal">×</text>
				</view>
				<view class="modal-body">
					<text class="modal-message">请先登录并且开通VIP后再下载</text>
				</view>
				<view class="modal-footer">
					<button class="modal-btn cancel" @tap="closeVipModal">取消</button>
					<button class="modal-btn confirm" @tap="goToVipPage">前往主页</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
import { getToken } from '@/utils/auth'
import {
	getProduct
} from '@/api/products/product'
import {
	listImg
} from '@/api/products/img'
import {
	listVideo
} from '@/api/products/video'
import {
	mapGetters
} from 'vuex'
import {
	getDicts
} from '@/api/system/dict/data'
import {
	checkDownloadCount,
	getDownloadCount
} from '@/api/products/download'

export default {
	data() {
		return {
			id: null,
			productDetail: {
				id: '',
				productId: '',
				productName: '',
				productType: '',
				productPublish: 0,
				productPrice: 0,
				productBack: 0,
				productProfit: 0,
				productInventory: 0,
				productSales: 0,
				productReview: 0,
				vipOnly: false,
				imgList: [],
				imageList: [],
				videoList: []
			},
			activeTab: 'videos',
			isFavorite: false,
			showVipModal: false,
			selectedVideos: [],
			downloadInfo: null, // 新增：下载信息
			videoTabs: [], // 存储动态生成的视频标签页
		}
	},
	computed: {
		...mapGetters(['token', 'memberTime', 'isVip']),

		// 计算当前标签页的视频列表，确保总是返回数组
		currentTabVideos() {
			if (!this.productDetail.videoList || !Array.isArray(this.productDetail.videoList)) {
				return []
			}
			if (!this.activeTab) {
				return []
			}
			return this.productDetail.videoList.filter(item => item && item.videoType === this.activeTab)
		},
		isAllSelected() {
			if (!this.currentTabVideos || this.currentTabVideos.length === 0) return false;
			return this.currentTabVideos.every(video => this.selectedVideos.includes(video.id));
		},
		isAfterTargetDate() {
			const now = new Date();
			const target = new Date(2025, 10, 4, 9, 30, 0);
			return now > target;
		}
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id
			this.getProductDetail()

			// 新增：如果是VIP用户，获取下载次数信息
			if (this.isVip && this.token) {
				this.getDownloadInfo()
			}
		}
	},
	onShow() {
		// 页面显示时执行
		console.log('页面显示时 token:', this.token, 'isVip:', this.isVip);
	},
	watch: {
		token(newVal, oldVal) {
			console.log('token变化:', oldVal, '->', newVal);
			// token更新后可刷新下载权限
			if (newVal && this.isVip) {
				this.getDownloadInfo();
			}
		},
		isVip(newVal, oldVal) {
			console.log('isVip变化:', oldVal, '->', newVal);
		}
	},
	methods: {
		// 格式化百分比，保留最多2位小数，去掉末尾的0
		formatPercentage(value) {
			if (!value && value !== 0) return '0'
			return parseFloat((value * 100).toFixed(2))
		},
		// 获取产品详情
		getProductDetail() {
			getProduct(this.id).then(res => {
				this.productDetail = res.data
				// 获取图片和视频列表
				this.productDetail.imageList = [];
				if (this.productDetail.imgList.length > 0) {
					const image = this.productDetail.imgList[0];
					if (image.imagePath1) this.productDetail.imageList.push(image.imagePath1)
					if (image.imagePath2) this.productDetail.imageList.push(image.imagePath2)
					if (image.imagePath3) this.productDetail.imageList.push(image.imagePath3)
					if (image.imagePath4) this.productDetail.imageList.push(image.imagePath4)
					if (image.imagePath5) this.productDetail.imageList.push(image.imagePath5)
					if (image.imagePath6) this.productDetail.imageList.push(image.imagePath6)
				}
				this.getProductVideos()
			}).catch(() => {
				uni.showToast({
					title: '获取产品详情失败',
					icon: 'none'
				})
			})
		},
		// 获取产品视频
		getProductVideos() {

			listVideo({
				productId: this.productDetail.productId,
				pageNum: 1,
				pageSize: 1000
			}).then(res => {

				// 检查每个视频的数据结构
				if (res.rows && res.rows.length > 0) {


					this.productDetail.videoList = res.rows || []

					// 从视频数据中提取所有唯一的videoType作为标签页
					const videoTypes = new Set()
					res.rows.forEach(video => {
						if (video.videoType) {
							videoTypes.add(video.videoType)
						}
					})

					// 转换为数组并设置标签页
					this.videoTabs = Array.from(videoTypes)

					// 如果有标签页，切换到第一个
					if (this.videoTabs && this.videoTabs.length > 0) {
						this.switchTab(this.videoTabs[0])
					}
				} else {
					this.productDetail.videoList = []
					this.videoTabs = []
				}

			}).catch((error) => {
				console.error("获取视频列表失败:", error)
				uni.showToast({
					title: '获取视频列表失败',
					icon: 'none'
				})
				// 即使失败也要初始化空数组
				this.productDetail.videoList = []
				this.videoTabs = []
			})
		},
		// 切换标签
		switchTab(tab) {
			this.activeTab = tab

			// 使用$nextTick确保computed属性更新后再打印日志
			this.$nextTick(() => {

				// 检查每个视频的ID
				this.currentTabVideos.forEach((video, index) => { })
			})
		},
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		// 关闭VIP提示框
		closeVipModal() {
			this.showVipModal = false
		},
		// 跳转到VIP开通页面
			goToVipPage() {
				uni.switchTab({
					url: '/pages/mine/index'
				});
		},
		// 预览分享图片并提供保存选项
		previewShareImage(item) {
			if (!item.imagePath6) return;

			// 显示加载提示
			uni.showLoading({
				title: '检测图片...',
				mask: true
			});

			// 使用 uni.getImageInfo 检查图片是否存在
			uni.getImageInfo({
				src: item.imagePath6,
				success: (res) => {
					uni.hideLoading();
					// 图片存在且可以加载，直接预览
					uni.previewImage({
						current: item.imagePath6,
						urls: [item.imagePath6],
						longPressActions: {
							itemList: ['保存图片'],
							success: (data) => {
								if (data.tapIndex === 0) {
									uni.downloadFile({
										url: item.imagePath6,
										success: (downloadRes) => {
											uni.saveImageToPhotosAlbum({
												filePath: downloadRes.tempFilePath,
												success: () => {
													uni.showToast({
														title: '保存成功',
														icon: 'success'
													});
												},
												fail: () => {
													uni.showToast({
														title: '保存失败',
														icon: 'none'
													});
												}
											})
										}
									})
								}
							}
						}
					})
				},
				fail: (err) => {
					uni.hideLoading();
					// 图片不存在或加载失败
					uni.showToast({
						title: '暂无链接',
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		// 预览分享图片7并提供保存选项（将6.jpg或6.png替换为7.jpg）
		previewShareImage7(item) {
			if (!item.imagePath6) return;

			// 将链接中的 6.jpg 或 6.png 替换为 7.jpg
			const imagePath7 = item.imagePath6.replace(/6\.(jpg|png)$/i, '7.jpg');

			// 显示加载提示
			uni.showLoading({
				title: '检测图片...',
				mask: true
			});

			// 使用 uni.getImageInfo 检查图片是否存在
			uni.getImageInfo({
				src: imagePath7,
				success: (res) => {
					uni.hideLoading();
					// 图片存在且可以加载，直接预览
					uni.previewImage({
						current: imagePath7,
						urls: [imagePath7],
						longPressActions: {
							itemList: ['保存图片'],
							success: (data) => {
								if (data.tapIndex === 0) {
									uni.downloadFile({
										url: imagePath7,
										success: (downloadRes) => {
											uni.saveImageToPhotosAlbum({
												filePath: downloadRes.tempFilePath,
												success: () => {
													uni.showToast({
														title: '保存成功',
														icon: 'success'
													});
												},
												fail: () => {
													uni.showToast({
														title: '保存失败',
														icon: 'none'
													});
												}
											})
										}
									})
								}
							}
						}
					})
				},
				fail: (err) => {
					uni.hideLoading();
					// 图片不存在或加载失败
					uni.showToast({
						title: '暂无链接',
						icon: 'none',
						duration: 2000
					});
				}
			})
		},
		goToAIGenerate() {
			// 与批量下载一致的校验与弹窗流程
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '请先登录或者开通VIP后再使用AI生成',
					confirmText: '去登录',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({ url: '/pages/login' })
						}
					}
				})
				return
			}

			if (!this.isVip) {
				this.showVipModal = true
				return
			}

			try {
				const payload = {
					id: this.id,
					productName: this.productDetail.productName,
					productBack: this.productDetail.productBack,
					productProfit: this.productDetail.productProfit,
					productPrice: this.productDetail.productPrice,
					vipOnly: this.productDetail.vipOnly,
					imgList: this.productDetail.imgList || [],
					imageList: this.productDetail.imageList || [],
					videoList: this.productDetail.videoList || [],
					stats: {
						inventory: this.productDetail.productInventory,
						sales: this.productDetail.productSales,
						review: this.productDetail.productReview
					}
				}
				uni.setStorageSync('ai_product_payload', payload)
				uni.navigateTo({ url: '/pages/ai/generate/index' })
			} catch (e) {
				console.error('保存AI生成上下文失败', e)
				uni.showToast({ title: '无法进入AI生成页', icon: 'none' })
			}
		},



		// 切换视频选中状态
		toggleVideoSelection(videoId) {

			// 检查videoId是否有效
			if (videoId === undefined || videoId === null) {
				console.error("videoId无效!", videoId)
				return
			}

			const index = this.selectedVideos.findIndex(id => id == videoId);

			if (index === -1) {
				this.selectedVideos.push(videoId);
			} else {
				this.selectedVideos.splice(index, 1);
			}
		},
		toggleSelectAll() {
			if (!this.currentTabVideos || this.currentTabVideos.length === 0) return;

			if (this.isAllSelected) {
				// 当前标签页已全选 -> 取消全选
				this.selectedVideos = this.selectedVideos.filter(id =>
					!this.currentTabVideos.some(video => video.id === id)
				);
			} else {
				// 当前标签页未全选 -> 全选
				const currentIds = this.currentTabVideos.map(video => video.id);
				this.selectedVideos = Array.from(new Set([...this.selectedVideos, ...currentIds]));
			}
		},

		// 下载选中的视频
		downloadSelectedVideos() {
			console.log('点击下载 - token:', this.token, 'isVip:', this.isVip, 'selectedVideos:', this.selectedVideos);

			// 检查是否已登录
			if (!this.token) {
				uni.showModal({
					title: '提示',
					content: '请先登录或者开通VIP后再下载',
					confirmText: '去主页',
					cancelText: '继续浏览',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login'
							})
						}
					}
				})
				return
			}

			// 再检查VIP状态
			if (!this.isVip) {
				this.showVipModal = true
				return
			}

			if (this.selectedVideos.length === 0) {
				uni.showToast({
					title: '请先选择视频',
					icon: 'none'
				});
				return;
			}

			// 新增：校验下载权限
			uni.showLoading({
				title: '校验下载权限...'
			})

			checkDownloadCount(this.productDetail.productId, 'video').then(res => {
				uni.hideLoading()

				if (res && res.code === 200) {
					// 更新下载次数信息
					if (res.data) {
						this.downloadInfo = res.data
					}

					// 检查是否有足够的下载次数
					if (res.code == 200) {
						// 从所有视频中过滤
						const selectedItems = this.productDetail.videoList.filter(item =>
							this.selectedVideos.includes(item.id)
						);

						let downloadedCount = 0
						let failedCount = 0
						const that = this;
						// 判断是否有保存相册权限
						that.checkDownloadPermission().then(res => {
							uni.showLoading({
								title: '准备下载...'
							})
							selectedItems.forEach(item => {
								uni.downloadFile({
									url: item.videoPath,
									success: (res) => {
										if (res.statusCode === 200) {
											uni.saveVideoToPhotosAlbum({
												filePath: res.tempFilePath,
												success: () => {
													downloadedCount++
													if (downloadedCount +
														failedCount ===
														selectedItems.length) {
														uni.hideLoading()
														// 更新下载次数信息
														that.getDownloadInfo()
														uni.showToast({
															title: `已保存${downloadedCount}个视频`,
															icon: 'success'
														})
														//下载结束后清空选择
														that.selectedVideos = []
													}
												},
												fail: () => {
													failedCount++
													if (downloadedCount +
														failedCount ===
														selectedItems.length) {
														uni.hideLoading()
														// 更新下载次数信息
														that.getDownloadInfo()
														uni.showToast({
															title: `已保存${downloadedCount}个视频`,
															icon: 'success'
														})
														//下载结束后清空选择
														that.selectedVideos = []
													}
												}
											})
										} else {
											failedCount++
										}
									},
									fail: () => {
										failedCount++
										if (downloadedCount + failedCount === selectedItems
											.length) {
											uni.hideLoading()
											// 更新下载次数信息
											that.getDownloadInfo()
											uni.showToast({
												title: `保存失败`,
												icon: 'success'
											})
											//下载结束后清空选择
											that.selectedVideos = []
										}
									}
								})
							})
						}).catch(reason => {
							uni.hideLoading()
						})
					} else {
						uni.showToast({
							title: `今日可下载次数不足`,
							icon: 'none'
						})
					}
				} else {
					uni.showToast({
						title: res.msg || '下载校验失败',
						icon: 'none'
					})
				}
			})
		},

		// 检查下载权限
		checkDownloadPermission() {
			return new Promise((resolve, reject) => {
				uni.authorize({
					scope: "scope.writePhotosAlbum",
					success: (res) => {
						console.log(res)
						resolve(true)
					},
					fail: () => {
						// 使用Vant的确认弹窗
						uni.showModal({
							title: '提示',
							content: '请先授权保存相册权限',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											console.log('openSetting-success',res)
											if (res.authSetting['scope.writePhotosAlbum']) {
												// 授权成功，重新调用下载方法
												resolve(true)
											} else {
												uni.showToast({
													title: '授权失败，请手动打开权限',
													icon: 'none'
												})
												reject(false)
											}
										},
										fail: (res) => {
											console.log('openSetting-fail',res)
											reject(false)
										}
									})
								} else {
									uni.showToast({
										title: '授权失败，请手动打开权限',
										icon: 'none'
									})
									reject(false)
								}
							},
							fail: () => {
								uni.showToast({
									title: '授权失败，请手动打开权限',
									icon: 'none'
								})
								reject(false)
							}
						})
					}
				})
			})
			
		},



		// 新增：获取下载次数信息
		getDownloadInfo() {
			if (!this.isVip || !this.token || !this.productDetail.productId) {
				return
			}

			getDownloadCount(this.productDetail.productId).then(res => {
				if (res && res.code === 200) {
					this.downloadInfo = res.data
				}
			}).catch(err => {
				console.error('获取下载次数信息失败:', err)
			})
		},
	}
}
</script>

<style scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #ffffff;
	position: relative;
}

.nav-bar {
	display: flex;
	align-items: center;
	height: 50px;
	background-color: #fff;
	padding: 0 10px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	margin-top: 30px;
}

.back-btn-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 5px;
}

.back-btn {
	font-size: 28px;
	color: #333;
	font-weight: bold;
}

.page-title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-size: 17px;
	font-weight: bold;
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-details {
	flex: 1;
	overflow: hidden;
}

.product-header {
	background-color: #fff;
	padding-bottom: 15px;
	margin-bottom: 10px;
}

.product-swiper {
	width: 100%;
	height: 300px;
}

.product-cover {
	width: 100%;
	height: 100%;
}

.product-info {
	padding: 15px;
}

.product-title {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 10px;
}

.product-price {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.price {
	font-size: 20px;
	font-weight: bold;
	color: #ff5000;
	margin-right: 10px;
}

.commission-rate {
	font-size: 14px;
	color: #ff5000;
	margin-right: 10px;
}

.product-stats {
	display: flex;
	/* justify-content: space-between; */
	align-items: center;
}

.sales,
.review {
	font-size: 14px;
	color: #999;
	margin-right: 10px;
}

.vip-tag {
	background-color: #ff9500;
	color: #fff;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 3px;
}

.product-tabs-container {
	width: 100%;
	white-space: nowrap;
	background-color: #fff;
	margin-bottom: 10px;
}

.product-tabs {
	display: flex;
	padding: 0 10px;
}

.tab-item {
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 14px;
	color: #666;
	position: relative;
	padding: 0 15px;
	flex-shrink: 0;
}

.tab-item.active {
	color: #ff9500;
	font-weight: bold;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 20px;
	height: 2px;
	background-color: #ff9500;
}

.tab-content {
	background-color: #fff;
	padding: 15px;
	margin-bottom: 60px;
}

.section-title {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0 10px;
}

.description {
	font-size: 14px;
	color: #333;
	line-height: 1.6;
}

.preview-list {
	display: flex;
	flex-wrap: wrap;
}

.preview-item {
	width: 33.33%;
	padding: 5px;
	box-sizing: border-box;
}

.preview-image {
	width: 100%;
	height: 100px;
	border-radius: 5px;
}

.image-item {
	margin-bottom: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #eee;
}

.image-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.image-title {
	font-size: 16px;
	font-weight: bold;
}

.image-type {
	font-size: 12px;
	color: #999;
	background-color: #f5f5f5;
	padding: 2px 6px;
	border-radius: 3px;
}

/* Video Grid Styles */
.video-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
}

.video-card {
	width: 33.33%;
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 10px;
	position: relative;
}

.video-thumbnail {
	position: relative;
	width: 100%;
	height: 180px;
	border-radius: 8px;
	overflow: hidden;
	background-color: #f0f0f0;
	margin-bottom: 8px;
}

.video-checkbox {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 2;
	transform: scale(0.8);
}

.video-preview {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.video-info {
	margin-bottom: 8px;
}

.video-title {
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.video-type {
	font-size: 12px;
	color: #999;
	background-color: #f5f5f5;
	padding: 2px 6px;
	border-radius: 3px;
	display: inline-block;
	margin-top: 4px;
}

.video-actions {
	display: flex;
	justify-content: center;
	margin-top: 5px;
}

.action-btn {
	font-size: 12px;
	padding: 4px 15px;
	border-radius: 12px;
	border: none;
}

.download-btn {
	background-color: #ff9500;
	color: #fff;
}

.share-btn-group {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
}

.share-btn {
	background-color: #ff9500;
	color: #fff;
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 14px;
}

.no-link-tip {
	color: #999;
	font-size: 14px;
	text-align: right;
}

.viw-viw {
	text-align: right;
	margin-left: auto;
}

.videos-container {
	position: relative;
	padding-bottom: 60px;
}

.batch-action-bar {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 10px 15px;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
	border-top: 1px solid #eee;
	z-index: 10;
}

.selection-info {
	font-size: 14px;
	color: #666;
}

.batch-download-btn {
	background-color: #ff9500;
	color: #fff;
	font-size: 14px;
	padding: 1px 10px;
	border-radius: 5px;
	border: none;
	margin-left: 10px;
}

.batch-btn-group {
	display: flex;
}

.image-gallery {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.gallery-image {
	width: 33.33%;
	height: 100px;
	padding: 2px;
	box-sizing: border-box;
}

.download-area {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 10px;
}

.download-btn {
	font-size: 14px;
	color: #fff;
	background-color: #ff9500;
	padding: 5px 12px;
	border-radius: 15px;
	border: none;
}

.action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 0 15px;
	border-top: 1px solid #eee;
}

.action-left {
	display: flex;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: none;
	border: none;
	margin-right: 15px;
	padding: 0;
	line-height: 1.2;
}

.btn-icon {
	font-size: 20px;
	margin-bottom: 2px;
}

.btn-text {
	font-size: 12px;
	color: #666;
}

.action-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

.buy-btn {
	background-color: #ff5000;
	color: #fff;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	padding: 0 20px;
	border-radius: 18px;
	border: none;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.modal-content {
	width: 80%;
	background-color: #fff;
	border-radius: 10px;
	overflow: hidden;
}

.modal-header {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
}

.modal-title {
	font-size: 16px;
	font-weight: bold;
}

.modal-close {
	font-size: 20px;
	color: #999;
}

.modal-body {
	padding: 20px 15px;
}

.modal-message {
	font-size: 14px;
	color: #333;
	line-height: 1.5;
	text-align: center;
}

.modal-footer {
	display: flex;
	border-top: 1px solid #eee;
}

.modal-btn {
	flex: 1;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 16px;
	border: none;
	background: none;
}

.modal-btn.cancel {
	color: #666;
	border-right: 1px solid #eee;
}

.modal-btn.confirm {
	color: #ff9500;
	font-weight: bold;
}

/* 新增：下载信息样式 */
.download-info {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	margin-top: 10px;
	border-top: 1px dashed #eee;
}

.download-count,
.download-remaining {
	font-size: 13px;
	color: #666;
}

.download-remaining {
	color: #ff9500;
	font-weight: bold;
}
</style>